<template>
    <div class="totalbox mgl18">
        <div class="top">
            <img src="@/assets/image/home/stj.png" class="jpng" alt="">
            <div class="st">
                用水量统计
            </div>
            <div ref="charone" class="one"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue'
const { proxy } = getCurrentInstance()
import * as echarts from 'echarts';
import { useScreenStore } from '../store/index.js'
const screenStore = useScreenStore()
let charone = ref(null)
let initone = () => {
    var chartDom = charone.value;
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                color: '#fff',
                fontSize: 10
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff'
            }
        },
        series: [
            {
                data: [],
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: {
                    color: '#addd8a', //改变折线点的颜色
                    lineStyle: {
                        color: '#21C6FF' //改变折线颜色
                    }
                },
                areaStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0.1,
                                color: '#21C6FF' // 0% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(33, 198, 255, 0.3)' // 0% 处的颜色
                            },
                            {
                                offset: 0.7,
                                color: 'rgba(33, 198, 255, 0.1)' // 0% 处的颜色
                            },
                            {
                                offset: 0.9,
                                color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                }
            }
        ],
        grid: {
            show: false,
            top: '10%',
            right: '0%',
            bottom: '0%',
            left: '0%'
        },
    };
    option.xAxis.data = screenStore.totalMessage.waterUsedNumChartVo?.x
    option.series[0].data = screenStore.totalMessage.waterUsedNumChartVo?.y
    option && myChart.setOption(option);

}

watch(() => screenStore?.totalMessage?.waterUsedNumChartVo?.y, (newVal, oldVal) => {
    setTimeout(() => {
        initone()
    }, 1000)
}, { deep: true }, { immediate: true })

onMounted(() => {
    setTimeout(() => {
        initone()
    }, 1000)
})

</script>

<style lang='less' scoped>
.mgl18 {
    margin-left: 13px;
}

.totalbox {
    background-image: url('@/assets/image/home/tablebd.png');
    background-size: 418px 276px;
    background-repeat: no-repeat;
    width: 418px;
    height: 276px;
    overflow: hidden;
    // background-color: rgba(8, 39, 84, 0.5);

    .top {
        background-image: url('@/assets/image/home/tbg.png');
        background-size: 492px 52px;
        background-repeat: no-repeat;
        width: 492px;
        height: 52px;
        padding: 10px 13px 0px;
        position: relative;

        .jpng {
            width: 480px;
            height: 45px;
            margin-left: -28px;
            margin-top: -5px;
        }

        .st {
            color: #fff;
            font-size: 20px;
            position: absolute;
            font-weight: bold;
            top: 10px;
            left: 52px;
            background: linear-gradient(180deg, #FFF 55.26%, #34E1FF 93.42%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .one {
            width: 390px;
            height: 210px;
        }


    }
}
</style>